<template>
  <el-input
    v-model="modelValue"
    :placeholder="placeholder"
    :type="type"
    @input="$emit('update:modelValue', $event)"
  />
</template>

<script setup>
import { defineProps, ref, toRefs } from "vue";

const props = defineProps({
  modelValue: String,
  placeholder: {
    type: String,
    default: "请输入内容",
  },
  type: {
    type: String,
    default: "text",
  },
});

const { modelValue } = toRefs(props);
</script>
<style lang="scss" scoped>
.el-input {
  width: 9vw;
//   margin-left: 8.5vw;
  height: 4vh;
}

:deep(.el-input__inner) {
  color: #fff !important;
  font-size: 1vw !important;
  box-shadow: none !important;
}

/* 鼠标滑过时不显示边框 */
:deep(.el-input__wrapper:hover) {
  border: none !important;
  box-shadow: none !important;
}

/* 点击时不显示边框 */
:deep(.el-input__wrapper:focus) {
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-input__wrapper) {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 移除 el-select 在 focus 和 active 状态下的边框 */
:deep(.el-select .el-input .el-input__inner:focus),
:deep(.el-select .el-input .el-input__inner:active) {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: none !important;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: none !important;
}
</style>
